7.07 图书列表页美化样式
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<link rel="shortcut icon" href="{% static 'bootstrap3/favicon.ico' %}">
<link rel="stylesheet" href="{% static 'bootstrap3/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'font-awesome-6.6.0/css/all.min.css' %}">
<script src="{% static 'bootstrap3/bootstrap.min.js' %}"></script>
<script src="{% static 'jquery.min.js' %}"></script>
<style>
body{
background-image:url("{% static '/bg.jpg' %}")
}
</style>
</head>
<body>
<div class="container" style="margin-top:20px">
<!-- 主体顶头距为20px-->
<div class="row">
<div class="col-8 col-offset-2">
<div class="panel panel-primary">
<!-- 项目菜单默认为panel-default颜色,可以参考情境效果，改成蓝色：panel-primary-->
<div class="panel-heading">
<h2 class="panel-title">Book Manage System</h2>
<!--修改项目菜单名称为：Book Manage System-->
</div>
<div class="panel-body">
<a href="" class="btn btn-success" >添加</a>
<table class="table table-hover table-striped" >
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>价格</th>
<th>出版日期</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ book.id}}</td>
<td>{{ book.title}}</td>
<td>{{ book.price}}</td>
<td>{{ book.publish_date}}</td>
<td>{{ book.publisher}}</td>
<td>{{ book.authors}}</td>
<td>
<a href="" class="btn btn-primary btn-xs">
<i class="fa-solid fa-pen" style="color:primary"></i>
</a>
<a href="" class="btn btn-danger btn-xs">
<i class="fa-solid fa-trash fa-1x" aria-hidden="true"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>